<template>
    <div class="strategy-management">
        <div class="header">
            <p class="label">策略状态</p>
            <div class="status">
                <em></em>
                <span>策略运行中</span>
            </div>
            <p class="label">选择电站</p>
            <el-select v-model="selectedStation" placeholder="请选择电站" class="station-select">
                <el-option v-for="station in stationOptions" :key="station.value" :label="station.label"
                    :value="station.value" />
            </el-select>
            <el-button @click="stop" class="rl">停止策略</el-button>
            <el-button type="primary" @click="selectedStation = ''">重置</el-button>
        </div>
        <div class="strategy-config">
            <div class="config-header">
                <p class="label">配置策略</p>
                <el-radio-group v-model="configMode">
                    <el-radio label="按月">按月</el-radio>
                    <el-radio label="按日">按日</el-radio>
                </el-radio-group>
            </div>
            <div class="station-tabs">
                <div class="station-tab" v-for="(station, i) in stationTabs" :key="station.id">
                    <p class="num">{{ i + 1 }}</p>
                    <p class="name">{{ station.name }}</p>
                </div>
            </div>
        </div>
        <img src="./pic1.png" alt="策略配置图" />
        <img src="./pic2.png" alt="策略配置图" />
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

// 停止策略
const stop = () => {
    // 停止策略的逻辑
    console.log('策略已停止');
};
// 电站选项
const stationOptions = ref([
    { value: '1', label: '电站1' },
    { value: '2', label: '电站2' }
]);

// 当前选择的电站
const selectedStation = ref('1');

// 配置模式
const configMode = ref('按月');

// 电站标签
const stationTabs = ref([
    { id: 1, name: '大工业' },
    { id: 2, name: '小工业' },
    { id: 3, name: '商业' },
    { id: 4, name: '居民' },
    { id: 5, name: '其他' },
    { id: 6, name: '其他' },
    { id: 7, name: '其他' },
    { id: 8, name: '其他' },
    { id: 9, name: '其他' },
    { id: 10, name: '其他' },
    { id: 11, name: '其他' },
    { id: 12, name: '其他' }
]);

// 策略列表
const strategyList = ref([
    { startTime: '00:00', endTime: '00:00', power: 385, status: '充电', socLower: 0, socUpper: 100 }
]);

// 切换模式
const switchMode = ref('SOC控制模式');

// 逆功率保护表单
const reversePowerForm = ref({
    limit: '',
    target: '',
    protectionLevel: ''
});

// 需量控制表单
const demandControlForm = ref({
    limit: '',
    target: '',
    protectionLevel: ''
});

// 保护程度选项
const protectionLevels = ref([
    { value: 'low', label: '低' },
    { value: 'medium', label: '中' },
    { value: 'high', label: '高' }
]);

// 添加策略
const addStrategy = () => {
    strategyList.value.push({
        startTime: '00:00',
        endTime: '00:00',
        power: 0,
        status: '-',
        socLower: 0,
        socUpper: 0
    });
};
</script>

<style lang="scss" scoped>
.strategy-management {
    .header {
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
        padding: 0.12rem 0.16rem;
        background: #fff;
        display: flex;
        line-height: 0.4rem;

        .label {
            font-size: 0.16rem;
            color: #333;
            margin-right: 0.08rem;
        }

        .status {
            width: 1.2rem;
            height: 0.4rem;
            background: rgba(236, 247, 236, 1);
            border: 1px solid rgba(217, 240, 218, 1);
            border-radius: 0.04rem;
            color: rgba(40, 107, 41, 1);
            font-size: 0.14rem;
            text-align: center;
            margin-right: 0.4rem;

            em {
                width: 0.08rem;
                height: 0.08rem;
                border-radius: 50%;
                margin-right: 0.08rem;
                background: rgba(67, 178, 68, 1);
                display: inline-block;
            }
        }

        .el-select {
            width: 2rem;
        }

        .rl {
            margin-left: auto;
        }
    }

    .strategy-config {
        margin: 0.12rem 0.16rem;
        border: 1px solid rgba(205, 225, 254, 1);
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
        border-radius: 0.04rem;
        background: linear-gradient(180deg, #E6EFFD 0%, #FCFFFC 56.57%);
        padding: 0.12rem 0.16rem;

        .config-header {
            display: flex;
            align-items: center;
            height: 0.4rem;
            margin-bottom: 0.12rem;

            .label {
                margin-right: 0.16rem;
            }
        }
        .station-tabs{
            display: flex;
            justify-content: space-between;
            .station-tab{
                width: 1.24rem;
                height: 0.64rem;
                box-shadow: 0px 1px 2px 0px rgba(30, 61, 0, 0.15);
                border-radius: 4px;
                overflow: hidden;
                text-align: center;
                .num{
                    font-size: 0.16rem;
                    background: linear-gradient(90deg, #58D4E7 0%, #52CADC 100%);
                    color: #fff;
                    height: 0.32rem;
                }
                .name{
                    font-size: 0.14rem;
                    line-height: 0.32rem;
                }
            }
        }
    }
}
</style>